<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <el-input v-model="searchForm.name" placeholder="名称" clearable>
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-button @click="getUserList">搜索</el-button>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="dialogVisible = true">新增</el-button>
      </el-form-item>
      <el-form-item>
        <!-- 气泡删除 -->
        <el-popconfirm title="这是确定批量删除吗？" @confirm="delHandle(null)">
          <el-button type="danger" slot="reference" :disabled="delBtlStatu"
            >批量删除</el-button
          >
        </el-popconfirm>
      </el-form-item>
    </el-form>

    <el-table
      :data="tableData"
      ref="multipleTable"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      border
      stripe
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="pid" label="订单编号" width="280">
      </el-table-column>

      <el-table-column prop="phone" label="账号" width="120"> </el-table-column>

      <el-table-column prop="userPid" label="用户" width="120">
      </el-table-column>

      <el-table-column prop="createTime" label="创建时间" width="190">
      </el-table-column>

      <el-table-column prop="updateTime" label="更新时间" width="190">
      </el-table-column>

      <el-table-column prop="userStatus" width="250" label="状态(未付款|已付款|未使用)">
        <template slot-scope="scope">
          <el-tag size="small" v-if="scope.row.cardStatus === 1" type="success"
            >未付款</el-tag
          >
          <el-tag
            size="small"
            v-else-if="scope.row.cardStatus === 0"
            type="danger"
            >已付款</el-tag
          >
          <el-tag
            size="small"
            v-else-if="scope.row.cardStatus === 2"
            type="info"
            >已使用</el-tag
          >
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="230">
        <template slot-scope="scope">
          <el-button @click="editHandle(scope.row.pid)" type="text"
            >查看</el-button
          >
          <el-divider direction="vertical"></el-divider>
          <el-button type="text" @click="editHandle(scope.row.pid)"
            >编辑</el-button
          >

          <el-divider direction="vertical"></el-divider>
          <!-- Popconfirm 气泡确认框  -->
          <template>
            <el-popconfirm
              title="这是一段内容确定删除吗？"
              @confirm="delHandle(scope.row.pid)"
            >
              <el-button type="text" slot="reference">删除</el-button>
            </el-popconfirm>
          </template>
        </template>
      </el-table-column>
    </el-table>

    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[2, 5, 10, 100]"
        :current-page="current"
        :page-size="size"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog
      title="用户管理"
      :visible.sync="dialogVisible"
      width="600px"
      :before-close="handleClose"
    >
      <!-- Form 表单 -->
      <el-form
        :model="editForm"
        :rules="editFormRules"
        ref="editForm"
        label-width="100px"
        class="demo-editForm"
      >
        <el-form-item label="姓名" prop="userName" label-width="100px">
          <el-input v-model="editForm.userName" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="发布商品数量" prop="goodsNum" label-width="100px">
          <el-input v-model="editForm.goodsNum" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="邮箱" prop="email" label-width="100px">
          <el-input v-model="editForm.email" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="联系方式" prop="phone" label-width="100px">
          <el-input v-model="editForm.phone" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="信用分" prop="power" label-width="100px">
          <el-input v-model="editForm.power" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="状态" prop="userStatus" label-width="100px">
          <el-switch
            active-color="#13ce66"
            v-model="editForm.userStatus"
            active-value="1"
            inactive-value="0"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('editForm')"
            >确 定</el-button
          >
          <el-button @click="resetForm('editForm')">重 置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "Order",
  data() {
    return {
      tableData: [],

      searchForm: {},
      delBtlStatu: true,

      total: 0,
      size: 5,
      current: 1,

      dialogVisible: false,
      editForm: {
        userStatus: 1,
        power: 60,
      },

      // tableData: [],

      editFormRules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        code: [{ required: true, message: "请输入唯一编码", trigger: "blur" }],
        statu: [{ required: true, message: "请选择状态", trigger: "blur" }],
      },

      multipleSelection: [],

      permDialogVisible: false,
      // 分配权限字段
      roleForm: {},
      roleTreeData: [],
      roleDialogFormVisible: false,
      checkStrictly: true,

      permForm: {},
      defaultProps: {
        children: "children",
        label: "name",
      },
      permTreeData: [],
    };
  },

  created() {
    this.getUserList();
  },
  methods: {
    getUserList() {
      this.$axios
        .get("/cat/userCard/cardList", {
          params: {
            name: this.searchForm.name,
            limit: this.size,
            page: this.current,
          },
        })
        .then((res) => {
          this.tableData = res.data.cardList.list;
          this.size = res.data.cardList.pageSize;
          this.total = res.data.cardList.totalCount;
        });
    },

    // 分配权限
    roleHandle(pid) {
      this.roleDialogFormVisible = true;

      this.$axios.get("/cat/userinfo/info/" + pid).then((res) => {
        this.roleForm = res.data.data.userInfo;

        let roleIds = [];
        res.data.data.userInfo.sysRoles.forEach((row) => {
          console.log(row.pid + "\tid");
          roleIds.push(row.pid);
        });

        this.$refs.roleTree.setCheckedKeys(roleIds);
      });
    },

    // 分配权限
    submitRoleHandle(formName) {
      console.log(formName);
      var roleIds = this.$refs.roleTree.getCheckedKeys();
      this.$axios
        .post("/cat/userinfo/role/" + this.roleForm.pid, roleIds)
        .then((res) => {
          this.$message({
            showClose: true,
            message: "操作成功",
            type: "success",
            onClose: () => {
              this.getUserList();
              console.log(res);
            },
          });

          this.roleDialogFormVisible = false;
        });
    },

    // 勾选
    handleSelectionChange(val) {
      console.log("勾选");
      console.log(val);
      this.multipleSelection = val;

      this.delBtlStatu = val.length == 0;
    },

    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.size = val;
      this.getUserList();
    },

    // 分页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.current = val;
      this.getUserList();
    },

    // 重置
    resetForm(formName) {
      this.$refs[formName];
      this.dialogVisible = false;
      this.editForm = {};
    },

    // 重置
    handleClose() {
      this.resetForm("editForm");
    },

    // 更新｜新增
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios
            .post(
              "/gd/userinfo/" + (this.editForm.pid ? "update" : "save"),
              this.editForm
            )
            .then((res) => {
              console.log(res);
              this.$message({
                showClose: true,
                message: "操作成功",
                type: "success",
                onClose: () => {
                  this.getUserList();
                },
              });

              this.dialogVisible = false;
              this.resetForm(formName);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    // 编辑
    editHandle(pid) {
      this.$axios.get("/gd/userinfo/info/" + pid).then((res) => {
        this.editForm = res.data.data.userInfo;
        this.dialogVisible = true;
      });
    },

    //批量删除、单条删除
    delHandle(pid) {
      var pids = [];

      if (pid) {
        pids.push(pid);
      } else {
        this.multipleSelection.forEach((row) => {
          pids.push(row.pid);
        });
      }

      this.$axios.post("/gd/userinfo/delete", pids).then((res) => {
        console.log(res);
        this.$message({
          showClose: true,
          message: "操作成功",
          type: "success",
          onClose: () => {
            this.getUserList();
          },
        });
      });
    },
  },
};
</script>

<!-- 分页插件向右 -->
<style scoped>
.el-pagination {
  float: right;
  margin-top: 22px;
}
</style>
